<template>
  <div>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
        <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-house" style="font-weight: bold">&nbsp;&nbsp;后台管理</i>
        </el-breadcrumb-item>
        <el-breadcrumb-item><i class="el-icon-s-claim">&nbsp;&nbsp;采购管理</i></el-breadcrumb-item>
        <el-breadcrumb-item><i class="el-icon-circle-plus">&nbsp;&nbsp;订单发票添加</i></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div>
      <div class="data-canRead" style="width: 100%;background-color: white;height: auto">
        <el-steps :active="4" finish-status="success" simple style="background-color: white">
          <el-step title="商品编码"></el-step>
          <el-step title="商品信息"></el-step>
          <el-step title="上传图片"></el-step>
          <el-step title="数据阅览"></el-step>
        </el-steps>
        <el-divider></el-divider>
        <el-form :model="ruleForm" ref="ruleForm" label-width="130px">
          <el-form-item>
            <el-descriptions>
              <el-descriptions-item label="商品编码">{{ ruleForm.commodityCode }}</el-descriptions-item>
              <el-descriptions-item label="商品名称" :span="2">{{ ruleForm.commodityName }}</el-descriptions-item>
              <el-descriptions-item label="供应商名称" :span="3">{{ ruleForm.companyName }}</el-descriptions-item>
              <el-descriptions-item label="规格" :span="3">
                <el-tag size="small">{{ ruleForm.specs }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="数量">{{ ruleForm.count }}</el-descriptions-item>
              <el-descriptions-item label="订单金额" :span="2">{{ ruleForm.amount }}</el-descriptions-item>
              <el-descriptions-item label="发票" :span="3">
                <img :src="ruleForm.invoice" width="40" height="40">
              </el-descriptions-item>
            </el-descriptions>
          </el-form-item>
          <el-form-item>
            <router-link :to="{path: '/sys-admin/purchase/oderAndInvoiceAdd3'}">
              <el-button type="primary" @click="backToPreStep()" style="color:white;margin-right: 20px">上一步</el-button>
            </router-link>
            <el-button type="warning" @click="resetForm('ruleForm')" style="color:white;margin-right: 20px">重置
            </el-button>
            <el-button type="success" @click="submitForm('ruleForm')" style="color:white;">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {},
    }
  },
  methods: {

  }

}

</script>

<style scoped>
* {
  color: black;
}

.data-canRead {
  width: 380px;
  height: 380px;
  margin-top: 15px;
  box-shadow: 0px 5px 5px #8d858a;
  float: left;
  margin-right: 16px;
}

</style>